import ToggleFullscreen from "@/components/Chart/ToggleFullscreen.vue";
import { useFullscreen } from "@vueuse/core";
import DeviceBasic from "./dashboard/DeviceBasic";
import AlarmTotal from "./dashboard/AlarmTotal";
import DeviceLively from "./dashboard/DeviceLively";
import DeviceType from "./dashboard/DeviceType";
import Workorder from "./dashboard/Workorder";
import AlarmTrend from "./dashboard/AlarmTrend";
import EventList from "./dashboard/AlarmEventList";
import Header from "./dashboard/Header";
// import { GlobalStore } from "@/stores";
import "./index.scss";
import { dayjs } from "element-plus";
import { trendAlarm } from "@/api/modules/iot/alarm";
import { productTotalStat } from "@/api/modules/stat/stat";
export default defineComponent({
	setup() {
		// const globalStore = GlobalStore();
		const pageEl = ref();
		const pageFullscreen = useFullscreen(pageEl);
		const DeviceBasicEl = ref();
		const AlarmTotalEl = ref();
		const DeviceLivelyEl = ref();
		const DeviceTypeEl = ref();
		const AlarmTrendEl7 = ref();
		const WorkorderEl = ref();
		const AlarmTrendEl = ref();
		const EventListEl = ref();
		const HeaderEl = ref();
		// const initStatus = ref(false);
		const state = reactive({
			autoRefresh: null as any
		});
		onActivated(() => {
			// setTimeout(
			// 	async () => {
			// 		await autoFeatch();
			// 		initStatus.value = true;
			// 	},
			// 	initStatus.value ? 15 * 1000 : 100
			// );
			// HeaderEl.value.loadData();
			// WorkorderEl.value.loadData();
		});
		onDeactivated(() => {
			clearAutoReload();
		});
		onMounted(async () => {
			// let browerWidth = window.innerWidth; //浏览器可视宽度
			// let baseWidth = 1920; //设计稿宽度
			// let zoomValue = browerWidth / baseWidth; //缩放比例计算
			// (document.querySelector(".meizhuo-dashboard") as any).style.transform = "scale(" + zoomValue + "," + zoomValue + ")";
			// window.onresize = function () {
			// 	//窗口尺寸变化时，重新计算和缩放
			// 	browerWidth = window.innerWidth;
			// 	zoomValue = browerWidth / baseWidth;
			// 	(document.querySelector(".meizhuo-dashboard") as any).style.transform = "scale(" + zoomValue + "," + zoomValue + ")";
			// };
			await autoFeatch();
			HeaderEl.value.loadData();
			WorkorderEl.value.loadData();
		});
		onBeforeUnmount(() => {
			clearAutoReload();
		});
		const autoFeatch = async () => {
			let devRes: any = await productTotalStat({ productModelNotIn: "" });

			let size = 7;
			let timeStamp = `${dayjs().add(-size, "d").format("YYYY-MM-DD 00:00:00")}~${dayjs().format("YYYY-MM-DD 23:59:59")}`;
			let { result } = await trendAlarm({ deptId: "", timeStamp });
			await DeviceBasicEl.value.loadData(devRes, result);
			await DeviceTypeEl.value.loadData(devRes);
			await AlarmTotalEl.value.loadData(result);
			await AlarmTrendEl7.value.loadData(result);
			await AlarmTrendEl.value.loadData();
			await EventListEl.value.loadData();
			await DeviceLivelyEl.value.loadData();
			state.autoRefresh = setTimeout(async () => {
				await autoFeatch();
			}, 15 * 1000);
		};
		const clearAutoReload = () => {
			if (state.autoRefresh) {
				clearTimeout(state.autoRefresh);
				state.autoRefresh = null;
			}
		};
		return () => {
			return (
				<div class="meizhuo-dashboard" ref={pageEl}>
					<div class="header">
						{false ? (
							<ToggleFullscreen v-model={pageFullscreen.isFullscreen.value} onToggle={() => pageFullscreen.toggle()} />
						) : null}
						<Header ref={HeaderEl} />
					</div>
					<div class="main">
						<div class="main-body">
							<div class="root-container row1-left pr-4 pb-4">
								<div class="container relative w-full h-full">
									<div class="bg"></div>
									<div class="block">
										<DeviceBasic ref={DeviceBasicEl} />
									</div>
								</div>
							</div>
							<div class="root-container row1-center pr-4 pb-4">
								<div class="container relative w-full h-full">
									<div class="bg"></div>
									<div class="block">
										<AlarmTotal ref={AlarmTotalEl} />
									</div>
								</div>
							</div>
							<div class="root-container row1-right pb-4">
								<div class="container relative w-full h-full">
									<div class="bg"></div>
									<div class="block">
										<DeviceLively ref={DeviceLivelyEl} />
									</div>
								</div>
							</div>

							<div class="root-container row2-left pr-4">
								<div class="container relative w-full h-full">
									<div class="bg"></div>
									<div class="block">
										<DeviceType ref={DeviceTypeEl} />
									</div>
								</div>
							</div>
							<div class="root-container row2-center pr-4">
								<div class="container relative w-full h-full">
									<div class="bg"></div>
									<div class="block">
										<AlarmTrend dayRange={7} ref={AlarmTrendEl7} />
									</div>
								</div>
							</div>
							<div class="root-container row2-right">
								<div class="container relative w-full h-full">
									<div class="bg"></div>
									<div class="block">
										<Workorder ref={WorkorderEl} />
									</div>
								</div>
							</div>

							<div class="root-container row3-left pr-4 pt-4">
								<div class="container relative w-full h-full">
									<div class="bg"></div>
									<div class="block">
										<AlarmTrend ref={AlarmTrendEl} />
									</div>
								</div>
							</div>
							<div class="root-container row3-right pt-4">
								<div class="container relative w-full h-full">
									<div class="bg"></div>
									<div class="block">
										<EventList ref={EventListEl} />
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			);
		};
	}
});
